<template>
  <div id="app">
     <div class="mainhead">
       <div class="logos">
          <img src="../../img/ditu.png" style="width:13%;margin:0% 1% 0% 2%;">
         <img src="../../img/TopTextRight.png">
       </div>
         <router-link :to='{name:"GRZX"}'>
          <img src="../../img/users.png">
       </router-link>
     </div>    
    <app-slide></app-slide>
    <!-- <app-scoll></app-scoll> -->
    <div class="img_list">
      <ul>
        <li v-for="item in this.listMobileMenu" :key="item.menu.code">
          <router-link :to='{name:routerto(item.menu.code)}'>
            <img :src="other[2].src" v-if="item.menu.code=='QYXX'">
            <img :src="other[0].src" v-if="item.menu.code=='GFJY'">
            <img :src="other[7].src" v-if="item.menu.code=='KJSJ'">
            <img :src="other[1].src" v-if="item.menu.code=='SPJK'">
            <img :src="other[4].src" v-if="item.menu.code=='TZGG'">
            <img :src="other[11].src" v-if="item.menu.code=='JGJL'">
            <img :src="other[10].src" v-if="item.menu.code=='GRZX'">
            <!-- <img :src="other[3].src" v-if="item.menu.code=='RYDA'">
            <img :src="other[5].src" v-if="item.menu.code=='JGRY'">
            <img :src="other[6].src" v-if="item.menu.code=='FLFG'">
            <img :src="other[8].src" v-if="item.menu.code=='BSZN'">
            <img :src="other[9].src" v-if="item.menu.code=='HYZX'">
            <img :src="other[10].src" v-if="item.menu.code=='GRZX'">
            <img :src="other[11].src" v-if="item.menu.code=='XYDA'"> -->
            <p>{{item.menu.name}}</p>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import AppHead from '@/components/header'
  import AppSlide from '@/components/slide'
  import AppScoll from '@/components/notescoll'
  
  import {
    requestLogin
  } from '../../api/api'
  import {
    mapState
  } from 'vuex'
  import axios from 'axios';
  export default {
    components: {
      'app-head': AppHead,
      'app-slide': AppSlide,
      'app-scoll': AppScoll
    },
    data() {
      return {
        listMobileMenu: [],
        menuUnid: '',
      };
    },
    computed: {
      ...mapState({
        other: state => state.managementStore.other,
      }),
    },
  
    methods: {
      // 选择图片
      // 获取跳转name
      routerto(code) {
        this.goto = "";
        this.goto = code;
        return this.goto;
      },
      //获取数据
      fetchData() {
        let auth = JSON.parse(localStorage.getItem('auth'));
        let option = {
          params: {
            loginname: auth.loginname,
            password: auth.password,
            ip: "",
            deviceid: ""
          }
        }
        requestLogin(option).then((res) => {
          if (res.success === true) {
            this.listMobileMenu = res.data.listMobileMenu;
          }
        })
      }
    },
    mounted() {
      this.fetchData();
    }
  
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
  .mainhead{
        height: 50px;
    line-height:50px;
    background-color:#008c3f;
    width: 100%;
    vertical-align: middle;
    .logos{
      width:70%;
      float: left;
      img{
        width: 50%;
      }
    }
    a{
        width: 40px;
    float: right;
    text-align: right;
      img{
        width: 26px;
        margin-right: 5px;
      }
    }
  }
  .img_list {
    max-width: 640px;
    min-width: 300px;
    margin: 0 auto;
    overflow: hidden;
  }
  
  .img_list img {
    width: 45px;
    height: 45px;
    margin: 10px auto 0px;
    text-align: center;
  }
  
  .img_list li {
    -webkit-animation: fadeInUp 2s ease 0s 1 both;
    -moz-animation: fadeInUp 2s ease 0s 1 both;
    -o-animation: fadeInUp 2s ease 0s 1 both;
    animation: fadeInUp 2s ease 0s 1 both;
    float: left;
    padding: 10px 0 0 0;
    text-align: center;
    width: 33.33%;
  }
  
  .img_list li a p {
    color: #242424;
    font-size: 0.95rem;
    text-align: center;
    min-height: 35px;
    margin-bottom: 0;
  }
  
  @-webkit-keyframes fadeInUp {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      -moz-transform: translate3d(0, 100%, 0);
      -ms-transform: translate3d(0, 100%, 0);
      -o-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0)
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      -moz-transform: none;
      -ms-transform: none;
      -o-transform: none;
      transform: none;
    }
  }
  
  @-moz-keyframes fadeInUp {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      -moz-transform: translate3d(0, 100%, 0);
      -ms-transform: translate3d(0, 100%, 0);
      -o-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0)
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      -moz-transform: none;
      -ms-transform: none;
      -o-transform: none;
      transform: none;
    }
  }
  
  @-o-keyframes fadeInUp {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      -moz-transform: translate3d(0, 100%, 0);
      -ms-transform: translate3d(0, 100%, 0);
      -o-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0)
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      -moz-transform: none;
      -ms-transform: none;
      -o-transform: none;
      transform: none;
    }
  }
  
  @keyframes fadeInUp {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      -moz-transform: translate3d(0, 100%, 0);
      -ms-transform: translate3d(0, 100%, 0);
      -o-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0)
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      -moz-transform: none;
      -ms-transform: none;
      -o-transform: none;
      transform: none;
    }
  }
  
  //轮播样式重构
  .indicators {
    bottom: 5px !important;
  }
</style>
